import React from 'react'
import FilterTitle from '../FilterTitle'
import FilterPicker  from '../FilterPicker'
import FilterMore  from '../FilterMore'
import styles from './index.module.scss'
import axios from 'axios'
import getCurrentCity from '../../../../utils/currentCity'
import { Spring } from 'react-spring/renderprops'
// prev高亮的标签
const titleSelectedStatus = { 
  area: false,
  mode: false,
  price: false,
  more: false
}
// 选项中默认选中的内容
const selectedValues = {
  area: ["area", null],
  mode: ["null"],
  price: ["null"],
  more: []
}
export default class Filter extends React.Component {
  state = {
    titleSelectedStatus, // 控制标题高亮
    openType: '', // 控制当前展示哪个perv控件
    filtersData: {}, // 所有下拉perv控件的数据
    selectedValues, // prv下拉框中中默认选中的集合
    activeSelect: [] // 当前下拉框展示的数据，过滤你出来的依赖于type和selectedValues
  }
  componentDidMount () {
    this.body = document.querySelector('body')
    this.getFilterData()
  }
  testActive() { // 判断当前选中状态中是否为默认值，不是默认值就高亮
    // 拿这新旧两个selectedValues对象进行比对，若和默认的一样，就将控制改标签高亮的变量变为false
    // 新建变量重新赋值，为了引用数据类型赋值要赋予新的地址
    const { selectedValues:newSelectedValues,  titleSelectedStatus: newtitle} = this.state
    // Object.keys 拿到当前对象键的集合
    Object.keys(newSelectedValues).forEach(key => {
      // 判断新旧的selectedValues的那一项一样
      if (key === 'area' &&  ( newSelectedValues[key].length > 2 || newSelectedValues[key][0] !== 'area')) {
        newtitle[key] = true
      } else if (key === 'mode' && (newSelectedValues[key][0] !== 'null')) {
        newtitle[key] = true
      } else if (key === "price" && (newSelectedValues[key][0] !== 'null')) {
        newtitle[key] = true
      } else if (key === "more" &&(newSelectedValues[key].length > 0)) {
        // 更多选择
        newtitle[key] = true
      } else {
        newtitle[key] = false
      }
    })
    this.setState(_ => {
      return {
        titleSelectedStatus: newtitle
      }
    })
  }
  changeActive = (type) => { // 点击改变tiele选中
    this.body.classList.add(styles.hide) // 给整个body增加超出隐藏，否则点开遮罩层还会滚动
    this.testActive() // 判断是否和默认选中的一样
    this.setState( prc => {
      // 修改引用数据类型，给他传递一个新的对象
      return {
        titleSelectedStatus: {
          ...prc.titleSelectedStatus,
          [type]: true // 将被点击的高亮
        },
        activeSelect: prc.selectedValues[type], // 过滤出当前下拉框展示的默认值
        openType: type
      }
    })
  }
  onCancel = () => { // 隐藏对话框
    this.body.classList.remove(styles.hide)
    this.testActive()
    this.setState(_ => ({ openType: '' }))
  }
  onSave = (val, type) => { // 确认按钮事件，保存下拉框选择的状态
    this.body.classList.remove(styles.hide)
    // 子组件给父组件传值，调用父组件身上的事件，将点击的方式和对应的参数传递
    this.setState(prv => {
      // 父组件拿到后进行结构赋值
      return {
        openType: '', // 关闭
        selectedValues: { // 改变引用类型
          ...prv.selectedValues, // 解构大对象
          [type]: val // 将默认大对象中对应的值修改为change选择的val
        }
      }
    }, _ => {
      this.testActive()
      const QueryInfo = this.setQueryInfo()
      this.props.onFilter(QueryInfo) //传递选中参数到父级
    })
  }
  setQueryInfo() { // 整理请求参数
    // 根据当前的选中项整理出请求的参数
    const { selectedValues: { area, mode, price, more } } = this.state
    const QueryInfo = {}
    // 区域
    let areaValue = 'null'
    const areaKey = area[0]
    if (area.length === 3 ) {
      areaValue = area[2] === 'null' ? area[1] : area[2]
    }
    QueryInfo.areaKey = areaValue
    // 方式
    QueryInfo.mode = mode[0]
    // 租金
    QueryInfo.price = price[0]
    // 筛选
    QueryInfo.more = more.join(',')
    return QueryInfo
  }
  async getFilterData () { // 获取当前所有的pre数据
    const { value } = await getCurrentCity()
    const { data: res } = await axios.get(`http://api-haoke-web.itheima.net/houses/condition?id=${value}`) 
    this.setState(_ => {
      return {
        filtersData: res.body
      }
    })
  }
  renderMask () { // 渲染遮罩层
    const { openType } = this.state
    const isHide = openType === 'more' || openType === ''
    return (
      // 取消的时候也要有动画效果，只能改变to属性，当移除mask的时候，to变为0，创建时变为1
      // to属性决定你是展示动画还是隐藏动画
      <Spring from={{ opacity: 0 }} to={{ opacity:isHide ? 0:  1 }} >
                {props => {
                  if (props.opacity===0) return null // 当动画已经做完了，就不要渲染mask了
                  // 防止遮罩层已经隐藏了还是在页面中，到时点击失效
                  return (<div  style={props} className={styles.content} onClick={this.onCancel}/> )
                } }
        </Spring>
    )
  }
  renderPicker () { // 渲染Picker
    const { openType, filtersData: { area, subway, rentType, price } } = this.state
    // const isHide = openType === 'more' || openType === ''
    if ( openType !== "area" && openType !== "mode" && openType !== "price") return ''
    let data = [],
        cols = 3 // 控制当前啊pre中展示几列
    // 对数据进行过滤，筛选出当前点击的opentype对应的数据
    switch(openType)  {
      case 'area':
        data = [area, subway]
        cols = 3
       break
      case 'mode':
        data = rentType
        cols = 1
        break
      case 'price':
        data = price
        cols = 1
        break
        default:
          break
    }
    return ( <>
              <div
                  // 因为我们这个组件在点击切换的时候只是数据变了，diff不会重新渲染，所以state的值不会更新，设置key可以让每个key不一样、 
                  key={openType} 
                  className={styles.p}>
                  <FilterPicker 
                  onCancel={this.onCancel} 
                  onSave={this.onSave} 
                  data={data} // 默认展示的选项数据
                  cols={cols}
                  type={openType}
                  selectedValues={this.state.activeSelect} // 默然选中的选项
                  />
              </div>
              </>)
  }
  renderMore () { //渲染more组件
    if ( this.state.openType !== 'more') return ''
    const { openType, filtersData: { roomType, oriented, floor, characteristic },activeSelect } = this.state
    // 整理数据，将more组件中需要的数据整理对象
    const data = {
      roomType,
      oriented,
      floor,
      characteristic
    }
    return <FilterMore
             activeSelect={activeSelect} // 默然选中的
             openType={openType}
             data = {data} // 要展示的选项数据
             onCancel={this.onCancel}
             onSave={this.onSave}
             />
  }
  render () {
    return (
      <>
        {/* 标题 一直显示 */}
        <FilterTitle activeList={this.state.titleSelectedStatus} changeActive= {this.changeActive}/>
        {this.renderMask()}
        { this.renderPicker() }
        {this.renderMore()}
      </>
      // {/* 前三个组件的遮罩层 mask */}
      // {/* */}
   
    )
  }
}